<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box1{
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
    }
    </style>
    <script>
        //使div可以根据不同的方向键向不同的方向移动
        /* 
        按左键  div向左移动
        按右键 div向右移动
        */

        window.onload=function(){
            //为document绑定一个按键按下的事件
            document.onkeydown=function(event){
                event=event||window.event;
                var speed=10;
                //当用户按了ctrl以后，速度加快
                if(event.ctrlKey){
                    speed=50;
                }
                /* 
                    37左
                    38上
                    39右
                    40下
                */
                // console.log(event.keyCode);

                switch(event.keyCode){
                    case 37:
                        box1.style.left=box1.offsetLeft-speed+"px";
                        break;
                    case 39:
                        box1.style.left=box1.offsetLeft+speed+"px";
                        break;
                    case 38:
                        box1.style.top=box1.offsetTop-speed+"px";
                        break;
                    case 40:
                        box1.style.top=box1.offsetTop+speed+"px";
                        break;
                }
            }
        }
    </script>
</head>
<body>
    <div id="box1"></div>
</body>
</html>